<template>
    <div>
        <div class="header">
            <div>新型冠状病毒肺炎</div>
            <div>确诊患者相同中国行程查询图</div>
            <span style="font-size: 11px;font-weight: 300;text-align: center;">
            数据更新时间  2020-12-31 14:12</span>
        </div>

        <div
        id="content2"
        style="height: 400px;width:400px"
        ></div>
    </div>   
</template>

<script>

import pca from "../../assets/404_images/data3.json";
import { mapActions, mapState } from "vuex";

export default {
    data(){
        return{
            pca,
            
        }
        
    },
    mounted() {
    // 映射
        this.initEchart(); 
    },
    methods: {
        ...mapActions("article", [
            "findAllCategory",
            "page_query_article",
            "saveOrUpdate",
        ]),
        initEchart() {
            // 初始化图表
            var myChart = echarts.init(document.getElementById("content1"));

            // 指定图表的配置项和数据
            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    data: ['飞机', '火车', '地铁', '长途客车/大巴', '公交车', '出租车', '轮船', '其它公共场所']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '飞机',
                        type: 'bar',
                        data: [1, 1, 0, 0, 2, 3, 0]
                    },
                    {
                        name: '火车',
                        type: 'bar',
                        stack: '广告',
                        data: [0, 0, 0, 0, 0, 0, 0]
                    },
                    {
                        name: '地铁',
                        type: 'bar',
                        stack: '广告',
                        data: [0, 0, 0, 0, 0, 0, 0]
                    },
                    {
                        name: '长途客车/大巴',
                        type: 'bar',
                        stack: '广告',
                        data: [0, 0, 0, 0, 0, 0, 0]
                    },
                    {
                        name: '公交车',
                        type: 'bar',
                        data: [0, 0, 0, 0, 0, 0, 0],
                        markLine: {
                            lineStyle: {
                                type: 'dashed'
                            },
                            data: [
                                [{type: 'min'}, {type: 'max'}]
                            ]
                        }
                    },
                    {
                        name: '出租车',
                        type: 'bar',
                        barWidth: 5,
                        stack: '搜索引擎',
                        data: [0, 0, 0, 0, 0, 0, 0]
                    },
                    {
                        name: '轮船',
                        type: 'bar',
                        stack: '搜索引擎',
                        data: [0, 0, 0, 0, 0, 0, 0]
                    },
                    {
                        name: '其它公共场所',
                        type: 'bar',
                        stack: '搜索引擎',
                        data: [0, 0, 0, 0, 0, 0, 0]
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    }
}   


</script>


<style scoped>
    .header{
        font-size: 22px;
        font-weight: 300;
        color: #333;
        padding: 0 10px;
        height: 100px;
        width: 242px;
        text-align: center;
        margin-top: 15px;
        margin-bottom: 30px;
        
    }


</style>